<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="font-family: '微软雅黑';color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">教师权限管理</b>
              </div>
            </el-col>
          </el-row>
          <div style="margin: 50px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-table
              border
              :data="tableData"
              style="width: 100%">
              <el-table-column type="expand" width="60px" label="展开授权">
                <template slot-scope="props">
                  <div style="margin: 10px 80px;">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="tableData.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-checkbox @change="resetChecked">取消全选</el-checkbox>
                    <el-tree
                      :data="data"
                      show-checkbox
                      default-expand-all
                      node-key="id"
                      ref="data"
                      highlight-current
                      :props="defaultProps">
                    </el-tree>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="教师 ID"
                prop="teacherId">
              </el-table-column>
              <el-table-column
                label="教师工号"
                prop="teacherNum">
              </el-table-column>
              <el-table-column
                label="教师姓名"
                prop="teacherName">
              </el-table-column>
              <el-table-column
                label="教师密码"
                prop="teacherPassword">
              </el-table-column>
              <el-table-column
                label="教师权限"
                prop="teacherShiro">
              </el-table-column>
              <el-table-column label="操作" prop="desc">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="toGrantAuthorization(scope.$index, scope.row)">授权</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/adminSide/left'
import Top from '@/components/adminSide/top'

export default {
  name: 'teacherAuthority',
  data () {
    return {
      isIndeterminate: false,
      tableData: [{
        arr: '',
        checkAll: false,
        id: '',
        teacherId: '',
        teacherName: '',
        teacherNum: '',
        teacherPassword: '',
        teacherShiro: ''
      }],
      submitData: [{
        arr: '',
        checkAll: false,
        id: '',
        teacherId: '',
        teacherName: '',
        teacherNum: '',
        teacherPassword: '',
        teacherShiro: ''
      }],
      // 树形控件数据
      data: [
        {
          id: 1,
          label: '学生管理',
          children: [{
            id: 2,
            label: '添加学生'
          }, {
            id: 3,
            label: '学生信息'
          }]
        }, {
          id: 4,
          label: '班级管理',
          children: [{
            id: 5,
            label: '添加班级'
          }, {
            id: 6,
            label: '班级列表'
          }]
        }, {
          id: 7,
          label: '课程管理',
          children: [{
            id: 8,
            label: '添加课程'
          }, {
            id: 9,
            label: '课程信息'
          }]
        }, {
          id: 10,
          label: '作业管理',
          children: [{
            id: 11,
            label: '添加作业'
          }, {
            id: 12,
            label: '作业信息'
          }]
        }, {
          id: 13,
          label: '报表管理',
          children: [{
            id: 14,
            label: '学生信息分析',
            children: [{
              id: 15,
              label: '学生年龄分析'
            }]
          }, {
            id: 16,
            label: '课程信息分析',
            children: [{
              id: 17,
              label: '课程学分分析'
            }]
          }, {
            id: 18,
            label: '作业信息分析',
            children: [{
              id: 19,
              label: '作业提交分析'
            }, {
              id: 20,
              label: '学生成绩分析'
            }]
          }]
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created () {
    this.getAllTeacher()
  },
  methods: {
    // 管理员获取所有教师信息
    getAllTeacher () {
      this.$axios.get('http://localhost:8888/adminGetAllTeacher').then(res => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，所有教师信息获取成功',
            type: 'success'
          })
          this.tableData = res.data.data
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 授权按钮
    toGrantAuthorization (index, row) {
      this.handleCheckChange()
      this.submitData = row
      this.submitData.arr = this.tableData.arr
      console.log(this.submitData)
      this.$axios.post('http://localhost:8888/adminToTeacherGrantAuthorization', this.submitData).then(res => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，授权成功',
            type: 'success'
          })
          this.getAllTeacher()
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 全选树形控件
    handleCheckAllChange (val) {
      if (this.tableData.checkAll) {
        this.$refs.data.setCheckedNodes(this.data)
      } else {
        this.$refs.data.setCheckedKeys([])
      }
    },
    // 获取选中的控件结点
    handleCheckChange () {
      let res = this.$refs.data.getCheckedNodes()
      let a = []
      res.forEach((item) => {
        a.push(item.id)
      })
      this.tableData.arr = a
    },
    // 取消全选
    resetChecked () {
      this.isIndeterminate = true
      this.$refs.data.setCheckedKeys([])
    }
  },
  components: {
    Left,
    Top
  }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }

  a {
    text-decoration: none;
    color: white;
  }

  .el-chart-a {
    width: 1200px;
    height: 500px;
    margin: 10px auto;
  }

  .el-chart-1 {
    width: 400px;
    height: 400px;
    border-radius: 4px;
    list-style-type: none;
    margin-left: 40px;
    margin-right: 50px;
  }

  .el-chart-2 {
    width: 400px;
    height: 400px;
    border-radius: 4px;
    list-style-type: none;
  }

  .el-chart-b {
    width: 1200px;
    height: 500px;
    margin: 20px auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  }

  li {
    float: left;
  }

  .el-chart {
    width: 100%;
    height: 250px;
  }

  .el-chart ul li {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
    width: 220px;
    height: 120px;
    /*border: 1px solid gold;*/
    list-style-type: none;
    margin-right: 50px;
  }

  .el-chart ul li:hover {
    background-color: #eee;
  }
</style>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }
  a{
    text-decoration: none;
    color: white;
  }
</style>
<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #cadcf5;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
